.widget-slider{
	padding: 10px;
	border: 1px solid lighten( @border-color, 5 );
	margin-bottom: 40px;
	background: #fff;
	.carousel{
		margin: 0;
		overflow: hidden;
	}
	&:hover{
		.carousel-nav {
			.left, .right{
				.translate(0, 0);
			}
		}
	}
	.carousel-nav{
		.carousel-control{
			z-index: 9;
			left: 0;
			width: 0;
			height: 0;
			top: 60%;
			border: 0;
			opacity: 1;
			filter: alpha( opacity = 100 );
			margin: 0;
			i{
				position: relative;
				z-index: 99;
				font-size: 30px;
				top: -25px;
			}	
		}
		.left{
			.translate(-50px, 0);
			.transition(0.5s ease all);
			i{
				left: 5px;
			}
			&:after{
				border-left: 0px solid transparent;
				border-top: 50px solid darken(@body-color, 20);
				border-right: 50px solid transparent; 
			    content: " ";
			    display: inline-block;
			    left: 100%;
			    position: absolute;
			    top: 100%;
			}
			&:before{
				border-left: 0px solid transparent;
				border-bottom: 50px solid darken(@body-color, 20);
				border-right: 50px solid transparent; 
			    content: " ";
			    display: inline-block;
			    left: 100%;
			    position: absolute;
			    top: -50px;
			}
			&:hover{
				opacity: 0.80;
				filter: alpha( opacity = 80 );
				&:after{
					border-top: 50px solid @color;
				}
				&:before{
					border-bottom: 50px solid @color;
				}
			}
		}
		.right{
			.translate(50px, 0);
			.transition(0.5s ease all);
			i{
				right: 30px;
			}
			right: 0;
			left: auto;
			&:after{
				border-right: 0px solid transparent;
				border-top: 50px solid darken(@body-color, 20);
				border-left: 50px solid transparent; 
			    content: " ";
			    display: inline-block;
			    left: -50px;
			    position: absolute;
			    top: 100%;
			}
			&:before{
				border-right: 0px solid transparent;
				border-bottom: 50px solid darken(@body-color, 20);
				border-left: 50px solid transparent; 
			    content: " ";
			    display: inline-block;
			    left: -50px;
			    position: absolute;
			    top: -50px;
			}
			&:hover{
				opacity: 0.70;
				filter: alpha( opacity = 70 );
				&:before{
					border-bottom: 50px solid @color;
				}
				&:after{
					border-top: 50px solid @color;
				}
			}
		}
	}
	.carousel-indicators{
		position: absolute;
		top: auto;
		left: 0;
		right: 0;
		bottom: 10px;
		text-align: center;
		letter-spacing: 10px;
		span{
			display: inline-block;
			width: 18px;
			height: 18px;
			.border-radius( 9999px );
			border: 2px solid darken( @border-color, 10 );
			background: darken( @color, 20 );
			position: relative;
			cursor: pointer;
			overflow: hidden;
			&:hover{
				transform: rotate(180deg);
				-ms-transform: rotate(180deg); /* IE 9 */
				-webkit-transform: rotate(180deg); /* Safari and Chrome */
				transition: all 0.5s ease-in;
				-webkit-transition: all 0.5s ease-in;
				color: @color;
				&:before{
					content: " ";
					background: #fff;
					width: 18px;
					height: 18px;
					border: #fff;
					.border-radius( 999px );
					position: absolute;
					left: -12px;
				}
			}
		}
		span.active{
			background: @color;
			transform: rotate(180deg);
			-ms-transform: rotate(180deg); /* IE 9 */
			-webkit-transform: rotate(180deg); /* Safari and Chrome */
			transition: all 0.5s ease-in;
			-webkit-transition: all 0.5s ease-in;
			&:before{
				content: " ";
				background: #fff;
				width: 18px;
				height: 18px;
				border: #fff;
				.border-radius( 999px );
				position: absolute;
				left: -12px;
			}
		}
	}
	.item{
		.carousel-caption{
			padding: 10px 15px;
			color: #f5f5f5;
			h3{
				line-height: normal;
				margin: 0;
				font-size: 24.5px;
				border: 0;
				box-shadow: 0 0 0;
				&:after{
					margin: 0;
					border: 0;
				}	
				
			}
		}
	}
	.style2{
		.item{
			display: inherit;
			width: 0;
			height: 0;
			opacity: 0;
			.transition( 0.7s ease-in-out all);
			.slider-caption{
				position: absolute;
				bottom: 20px;
				left: 60px;	
				opacity: 0;			
				transition: all 1s ease;
				span{
					background: @color;
					padding: 10px 20px;
					margin-bottom: 10px;
					line-height: normal;
					color: #f5f5f5;
					width: auto;
					display: inline-block;
					font-size: 25px;
				}
				.caption-desc{
					padding: 10px 20px;
					#translucent > .background(darken(@body-color, 30), 0.8);
					color: #f5f5f5;
					margin-left: 20px;
				}
			}
		}
		
		.item.active{
			display: inherit;
			width: auto;
			height: auto;
			opacity: 1;
			.slider-caption{
				opacity: 1;
				filter: alpha(opacity = 100);

			}
		}
		.next.left, .prev.right {
			display: inherit;
			 .translate(0, 0);
			z-index: 1;
		    .slider-caption {
		      opacity: 0;
		      filter: alpha(opacity = 0);
		      bottom: 20px;
		    }
		}
		.active.left, .active.right {
		  left: 0;
		  z-index: 2;
		  opacity: 0;
		  filter: alpha(opacity=0);
		    .slider-caption {
		     .translate(300px, 0);
		     
		      opacity: 0;
		      filter: alpha(opacity = 0);
		    }
		}
	}
	.style1{
		right: 20px;
		left: auto;
		text-align: right;
	}
}
@media (max-width: 768px){
	.widget-slider .style2 .item.active .slider-caption{
		display: none;
	}
	.widget-slider .carousel-indicators{
		bottom: 0;
	}
	.widget-slider .item .carousel-caption{
		display: none;
	}
	.widget-slider .style1{
		left: 0;
		right: 0;
		text-align: center;
	}
}
@media (max-width: 480px){
	.widget-slider .carousel-nav{
		.left, .right{
			&:before, &:after{
				border: 0;
			}
		}
	}
}